<template>
  <div class="app-container">
    <!--    <el-button type="primary" plain @click="dialogCreateAssociationVisible = true">创建公会</el-button>-->

    总充值：{{ totalRecharge }} <br>
    搜索:
    <el-input v-model="keyword" style="width: 200px; padding: 10px" placeholder="输入用户名" />

    <div class="block">
      <el-date-picker
        v-model="filterTime.date"
        type="daterange"
        value-format="yyyy-MM-dd"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        @change="dateFormat"
      />
    </div>
    <span> 充值状态： </span>
    <el-select v-model="status" placeholder="请选择状态" style="margin: 10px">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-button type="primary" style="margin-top: 20px" @click="search">搜索</el-button>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="用户id" width="110">

        <template slot-scope="scope">
          {{ scope.row.userId }}
        </template>
      </el-table-column>
      <el-table-column label="用户昵称" width="150">
        <template slot-scope="scope">
          {{ scope.row.nickname }}
        </template>
      </el-table-column>

      <el-table-column label="支付方式" width="150">
        <template slot-scope="scope">
          {{ scope.row.type }}
        </template>
      </el-table-column>
      <el-table-column label="充值金额" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.price }}
        </template>
      </el-table-column>

      <el-table-column label="订单号" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.orderNo }}
        </template>
      </el-table-column>
      <el-table-column label="充值状态" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.status }}
        </template>
      </el-table-column>

      <el-table-column label="充值时间" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>

      <!--      <el-table-column label="操作" width="110" align="center">-->
      <!--        <template slot-scope="scope">-->
      <!--          <el-button-->
      <!--            v-if="status != 4"-->
      <!--            size="mini"-->
      <!--            type="danger"-->
      <!--            icon="el-icon-delete"-->
      <!--            circle-->
      <!--            @click=" handelDelete(scope.row.id)"></el-button>-->
      <!--          <el-button-->
      <!--            v-if="status == 4"-->
      <!--            size="mini"-->
      <!--            type="danger"-->
      <!--            icon="el-icon-delete"-->
      <!--            circle-->
      <!--            @click=" handelRealDelete(scope.row.id)"></el-button>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
    </el-table>

    <el-dialog title="公会信息" :visible.sync="dialogCreateAssociationVisible" width="76%">
      <el-form ref="form" :model="associationDTO" label-width="80px">
        <el-form-item label="公会名称">
          <el-input v-model="associationDTO.name" />
        </el-form-item>
        <el-form-item label="会长账号">
          <el-input v-model="associationDTO.presidentAccount" />
        </el-form-item>
        <el-form-item label="公会头像">
          <el-upload
            action="https://admin-api.pengxinmeta.com/admin-api/file/upload"
            list-type="picture-card"
            :limit="1"

            :on-success="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus" />
          </el-upload>
        </el-form-item>
        <el-form-item label="公会简介">
          <el-input v-model="associationDTO.intro" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCreateAssociationVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleCreateAssociation">确 定</el-button>
      </div>
    </el-dialog>

    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="size"
      :current-page="page"
      :total="total"
      @current-change="fetchData"
    />
  </div>
</template>

<script>
import { getRechargeList, getTotalRecharge } from '@/api/user'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      associationDTO: {
        avatar: '',
        presidentAccount: '',
        name: '',
        intro: '',
        commissionRatio: 0.15
      },
      options: [{
        value: null,
        label: '全部'
      }, {
        value: '0',
        label: '审核中'
      }, {
        value: '1',
        label: '已通过'
      }, {
        value: '-1',
        label: '被驳回'
      }],
      dialogCreateAssociationVisible: false,
      list: null,
      listLoading: true,
      status: null,
      totalRecharge: null,
      page: 1,
      size: 10,
      keyword: '',
      filterTime: {
        startTime: '',
        endTime: '',
        date: ''
      },
      total: 0
    }
  },
  created() {
    this.fetchData(this.page)
  },
  methods: {
    search() {
      getTotalRecharge({ keyword: this.keyword, status: this.status, startTime: this.filterTime.startTime, endTime: this.filterTime.endTime }).then(res => {
        this.totalRecharge = res.data.totalRecharge
      })
      getRechargeList({ page: this.page, size: this.size, status: this.status, keyword: this.keyword, startTime: this.filterTime.startTime, endTime: this.filterTime.endTime }).then(res => {
        this.total = res.total
        console.log(this.page)
        this.list = res.data
      })
    },
    dateFormat(picker) {
      this.filterTime.startTime = picker[0]
      this.filterTime.endTime = picker[1]
    },
    handleClick(tab, event) {
      this.fetchData(this.page)
    },
    fetchData(val) {
      this.page = val
      this.listLoading = true
      getRechargeList({ page: this.page, size: this.size, status: this.status, keyword: this.keyword, startTime: this.filterTime.startTime, endTime: this.filterTime.endTime }).then(response => {
        this.total = response.total
        console.log(this.page)
        this.list = response.data
        this.listLoading = false
        getTotalRecharge({ keyword: this.keyword, status: this.status, startTime: this.filterTime.startTime, endTime: this.filterTime.endTime }).then(res => {
          this.totalRecharge = res.data.totalRecharge
        })
      })
    },

    handleRemove(file) {
      this.associationDTO.avatar = ''
      console.log(file)
    },
    handlePictureCardPreview(response, file) {
      this.associationDTO.avatar = response.data.url
    },
    handleCreateAssociation() {
      this.dialogCreateAssociationVisible = false
      createAssociation(this.associationDTO).then(res => {
        this.fetchData(this.page)
        this.$message({
          type: 'success',
          message: '创建成功!'
        })
      })
    },
    handelDelete(id) {
      this.$confirm('此操作将删除该动态, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // deleteById(id).then(() => {
        //   this.fetchData(this.page)
        //   this.$message({
        //     type: 'success',
        //     message: '删除成功!'
        //   })
        // }).catch(() => {
        //   this.$message({
        //     type: 'error',
        //     message: '删除失败'
        //   })
        // })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handelRealDelete(id) {
      this.$confirm('此操作将彻底删除该动态,请谨慎操作！', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // realDeleteById(id).then(() => {
        //   this.fetchData(this.page)
        //   this.$message({
        //     type: 'success',
        //     message: '删除成功!'
        //   })
        // }).catch(() => {
        //   this.$message({
        //     type: 'error',
        //     message: '删除失败'
        //   })
        // })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>
